<template>
  <div class="Mall4j empty">
    <div class="img">
      <img
        v-if="srcType === 0"
        src="@/assets/images/empty-pic/not-found.png"
        alt
      >
      <img
        v-if="srcType === 1"
        src="@/assets/images/empty-pic/order-empty.png"
        alt
      >
      <img
        v-if="srcType === 2"
        src="@/assets/images/empty-pic/collect-empty.png"
        alt
      >
      <img
        v-if="srcType === 3"
        src="@/assets/images/empty-pic/coupon-empty.png"
        alt
      >
      <img
        v-if="srcType === 4"
        src="@/assets/images/empty-pic/cart-empty.png"
        alt
      >
      <img
        v-if="srcType === 5"
        src="@/assets/images/empty-pic/address-empty.png"
        alt
      >
      <img
        v-if="srcType === 6"
        src="@/assets/images/empty-pic/search-empty.png"
        alt
      >
    </div>
    <div class="action">
      <div class="text">
        {{ text }}
      </div>
      <router-link
        v-if="back && !isClick"
        :to="backPath"
        class="btn"
      >
        {{ back }}
      </router-link>
      <a
        v-if="back && isClick"
        href="javascript:void(0)"
        class="btn"
        @click="handleClick"
      >{{ back }}</a>
      <router-link
        v-if="exBack"
        to="/"
        class="btn-r"
      >
        {{ exBack }}
      </router-link>
    </div>
  </div>
</template>

<script setup>

const emit = defineEmits(['handleClick'])
defineProps({
  srcType: {
    type: Number,
    default: 0
  },
  text: {
    type: String,
    default: '暂无相关数据'
  },
  back: {
    type: String,
    default: ''
  },
  exBack: {
    type: String,
    default: ''
  },
  backPath: {
    type: [String, Object],
    default: '/'
  },
  isClick: {
    type: Boolean,
    default: false
  }
})

const handleClick = () => {
  emit('handleClick')
}

</script>
